<template>
  <div class="relative h-[89px] lg:h-[96px]">
    <!-- 底部阴影 -->
    <div
      class="w-full h-[97px] lg:h-[104px] absolute rounded-lg left-0 -bottom-1.5"
      :style="{ backgroundColor: colorBg }"></div>
    <nuxt-link
      class="flex h-full item-bg rounded-md px-3 relative"
      external
      :to="
        $localePath(`/goods/${discountGoodsInfo.goodsSku?.goods?.urlName || discountGoodsInfo.goodsSku?.goods?.id}`)
      ">
      <y-image
        class="ltr:mr-2.5 rtl:ml-2.5 -mt-2.5 rounded overflow-hidden shrink-0 w-16 h-16 mx-auto object-cover"
        :src="$withPicOrigin(discountGoodsInfo.goodsSku?.goods?.smallIcon || discountGoodsInfo.goodsSku?.smallIcon)"
        :alt="discountGoodsInfo.goodsSku?.name"
        width="65"
        height="65" />
      <section class="pt-2.5 pb-3 flex-1 flex flex-col justify-between">
        <h3 class="w-full mb-2 line-clamp-2 text-sm text-white leading-5">
          {{ discountGoodsInfo.goodsSku?.goods?.name || discountGoodsInfo.goodsSku?.name }}
        </h3>
        <div class="flex w-full item-center justify-between text-xs text-[#fff]">
          <p class="text-[#ffffffc5] text-base">{{ $calcPrice(discountGoodsInfo.goodsSku?.price) }}</p>
          <p class="bg-[#15AA7F] rounded-sm px-1 flex align-center">- {{ discountGoodsInfo.goodsSku?.discount }}%</p>
        </div>
      </section>
    </nuxt-link>
  </div>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'

const props = defineProps<{
  discountGoodsInfo: any
  colorBg: string
  isDetail?: boolean
}>()

// const bgColor = computed(() => {
//   return props.discountGoodsInfo?.goods?.bgColor || 'rgba(55, 70, 70, 0.4)'
// })
</script>

<style scoped lang="scss">
.item-bg {
  background: url('assets/images/discount/exclusive_item_back@2x.webp') no-repeat;
  background-size: cover;
}
</style>
